import * as React from 'react'
import { Stack, Typography } from '@mui/material'
import basicTheme from './basicTheme'

export const GuiZTable = {
  styleOverrides: {
    filter: {
      backgroundColor: '#F7F9FB',
      marginLeft: 0,
      marginTop: 0,
      paddingBottom: basicTheme.spacing(2),
      '& .GuiFormField-layout': {
        width: 200,
      },
    },
    tableContainer: {
      '& .GuiLoading-root': {
        border: `1px solid ${basicTheme.palette.divider}`,
      },
      '& thead': {
        backgroundColor: basicTheme.palette.grey.A100,
        '& > tr > th:not(:last-of-type)': {
          borderRight: `1px solid ${basicTheme.palette.divider}`,
        },
        '& > tr > th': {
          color: basicTheme.palette.text.secondary,
          fontWeight: basicTheme.typography.fontWeightRegular,
        },
      },
      '& tbody': {
        '& > tr:nth-child(even)': {
          backgroundColor: basicTheme.palette.grey.A100,
        },
        '& > tr > th:not(:last-of-type)': {
          borderRight: `1px solid ${basicTheme.palette.divider}`,
        },
        '& > tr > td:not(:last-of-type)': {
          borderRight: `1px solid ${basicTheme.palette.divider}`,
        },
        '& > tr:last-of-type': {
          '& > th': {
            borderBottom: 'none',
          },
          '& > td': {
            borderBottom: 'none',
          },
        },
      },
    },
  },
  defaultProps: {
    paginationProps: {
      getItemAriaLabel: count => (
        <Stack direction="row" spacing={0.5}>
          <Typography>共</Typography>
          <Typography color="primary">{count}</Typography>
          <Typography>条数据</Typography>
        </Stack>
      ),
    },
  },
}
